<template>
  <view class="cyberpunk-recharge-container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="back-btn" @click="goBack">
        ← 返回
      </view>
      <text class="title">量子充值</text>
      <view class="quantum-indicator">⚛️</view>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="content-wrapper">
      <view class="user-card">
        <view class="user-avatar">
          <image :src="userInfo.avatar" mode="aspectFill" />
          <view class="avatar-ring"></view>
        </view>
        <view class="user-details">
          <text class="username">{{ userInfo.userName }}</text>
          <text class="current-level">当前等级: {{ userInfo.level }}</text>
          <text class="current-points">积分余额: {{ userInfo.points }}</text>
        </view>
      </view>
      
      <!-- 充值套餐 -->
      <scroll-view scroll-y class="content-scroll">
        <view class="section-title">
          <text class="title-text">充值套餐</text>
          <text class="title-subtitle">RECHARGE PACKAGES</text>
        </view>
        
        <view class="packages-grid">
          <view 
            class="package-card" 
            v-for="pkg in rechargePackages" 
            :key="pkg.id"
            :class="{ 'selected': selectedPackage === pkg.id, 'recommended': pkg.recommended }"
            @click="selectPackage(pkg)"
          >
            <view class="package-badge" v-if="pkg.recommended">
              <text>推荐</text>
            </view>
            
            <view class="package-header">
              <text class="package-name">{{ pkg.name }}</text>
              <text class="package-duration">{{ pkg.duration }}</text>
            </view>
            
            <view class="package-price">
              <text class="price-symbol">¥</text>
              <text class="price-amount">{{ pkg.price }}</text>
              <text class="price-original" v-if="pkg.originalPrice">¥{{ pkg.originalPrice }}</text>
            </view>
            
            <view class="package-benefits">
              <view class="benefit-item" v-for="benefit in pkg.benefits" :key="benefit">
                <text class="benefit-icon">✓</text>
                <text class="benefit-text">{{ benefit }}</text>
              </view>
            </view>
            
            <view class="package-bonus" v-if="pkg.bonus">
              <text class="bonus-text">{{ pkg.bonus }}</text>
            </view>
          </view>
        </view>
        
        <!-- 支付方式 -->
        <view class="section-title">
          <text class="title-text">支付方式</text>
          <text class="title-subtitle">PAYMENT METHODS</text>
        </view>
        
        <view class="payment-methods">
          <view 
            class="payment-item" 
            v-for="method in paymentMethods" 
            :key="method.id"
            :class="{ 'selected': selectedPayment === method.id }"
            @click="selectPayment(method)"
          >
            <view class="payment-icon">{{ method.icon }}</view>
            <view class="payment-info">
              <text class="payment-name">{{ method.name }}</text>
              <text class="payment-desc">{{ method.description }}</text>
            </view>
            <view class="payment-radio">
              <view class="radio-dot" v-if="selectedPayment === method.id"></view>
            </view>
          </view>
        </view>
        
        <!-- 优惠码 -->
        <view class="coupon-section">
          <view class="section-title">
            <text class="title-text">优惠码</text>
            <text class="title-subtitle">PROMO CODE</text>
          </view>
          
          <view class="coupon-input">
            <input 
              class="coupon-field" 
              v-model="couponCode" 
              placeholder="请输入优惠码"
              placeholder-style="color: rgba(255,255,255,0.5)"
            />
            <button class="coupon-btn" @click="applyCoupon">应用</button>
          </view>
          
          <view class="coupon-discount" v-if="appliedDiscount > 0">
            <text class="discount-text">优惠金额: -¥{{ appliedDiscount }}</text>
          </view>
        </view>
        
        <!-- 订单摘要 -->
        <view class="order-summary">
          <view class="section-title">
            <text class="title-text">订单摘要</text>
            <text class="title-subtitle">ORDER SUMMARY</text>
          </view>
          
          <view class="summary-content">
            <view class="summary-item">
              <text class="summary-label">选择套餐</text>
              <text class="summary-value">{{ selectedPackageInfo.name || '请选择套餐' }}</text>
            </view>
            <view class="summary-item">
              <text class="summary-label">套餐价格</text>
              <text class="summary-value">¥{{ selectedPackageInfo.price || 0 }}</text>
            </view>
            <view class="summary-item" v-if="appliedDiscount > 0">
              <text class="summary-label">优惠减免</text>
              <text class="summary-value discount">-¥{{ appliedDiscount }}</text>
            </view>
            <view class="summary-divider"></view>
            <view class="summary-item total">
              <text class="summary-label">实付金额</text>
              <text class="summary-value">¥{{ finalPrice }}</text>
            </view>
          </view>
        </view>
        
        <!-- 底部空间 -->
        <view style="height: 120px;"></view>
      </scroll-view>
    </view>
    
    <!-- 底部支付按钮 -->
    <view class="payment-footer">
      <view class="footer-content">
        <view class="total-price">
          <text class="total-label">总计</text>
          <text class="total-amount">¥{{ finalPrice }}</text>
        </view>
        <button 
          class="pay-btn" 
          :class="{ 'disabled': !canPay }"
          @click="processPay"
          :disabled="!canPay"
        >
          {{ payButtonText }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';


// 用户信息
const userInfo = reactive({
  userName: '梦之泪伤',
  avatar: '/static/img/ml.png',
  level: '16',
  points: 4280
});

// 选中的套餐和支付方式
const selectedPackage = ref(null);
const selectedPayment = ref(1);
const couponCode = ref('');
const appliedDiscount = ref(0);

// 充值套餐数据
const rechargePackages = reactive([
  {
    id: 1,
    name: '量子入门',
    duration: '1个月',
    price: 29,
    originalPrice: null,
    benefits: ['基础诊断功能', '技术支持', '数据备份'],
    bonus: null,
    recommended: false
  },
  {
    id: 2,
    name: '量子进阶',
    duration: '3个月',
    price: 79,
    originalPrice: 87,
    benefits: ['全部诊断功能', '优先技术支持', '高级数据分析', '专属客服'],
    bonus: '赠送100积分',
    recommended: true
  },
  {
    id: 3,
    name: '量子专业',
    duration: '6个月',
    price: 149,
    originalPrice: 174,
    benefits: ['全部功能解锁', 'VIP技术支持', '定制化服务', '专属顾问'],
    bonus: '赠送300积分',
    recommended: false
  },
  {
    id: 4,
    name: '量子至尊',
    duration: '12个月',
    price: 279,
    originalPrice: 348,
    benefits: ['终身免费升级', '24/7专属支持', '企业级服务', '定制开发'],
    bonus: '赠送888积分',
    recommended: false
  }
]);

// 支付方式
const paymentMethods = reactive([
  {
    id: 1,
    name: '微信支付',
    description: '安全便捷的移动支付',
    icon: '💳'
  },
  {
    id: 2,
    name: '支付宝',
    description: '快速安全的在线支付',
    icon: '🅰️'
  },
  {
    id: 3,
    name: '银行卡',
    description: '支持各大银行储蓄卡',
    icon: '🏦'
  },
  {
    id: 4,
    name: '数字钱包',
    description: '区块链加密支付',
    icon: '⚛️'
  }
]);

// 计算属性
const selectedPackageInfo = computed(() => {
  return rechargePackages.find(pkg => pkg.id === selectedPackage.value) || {};
});

const finalPrice = computed(() => {
  const basePrice = selectedPackageInfo.value.price || 0;
  return Math.max(0, basePrice - appliedDiscount.value);
});

const canPay = computed(() => {
  return selectedPackage.value && selectedPayment.value && finalPrice.value > 0;
});

const payButtonText = computed(() => {
  if (!selectedPackage.value) return '请选择套餐';
  if (!selectedPayment.value) return '请选择支付方式';
  return `立即支付 ¥${finalPrice.value}`;
});

// 方法
const goBack = () => {
  uni.navigateBack();
};

const selectPackage = (pkg) => {
  selectedPackage.value = pkg.id;
  
  // 添加选择反馈
  uni.vibrateShort();
  
  uni.showToast({
    title: `已选择 ${pkg.name}`,
    icon: 'none',
    duration: 1000
  });
};

const selectPayment = (method) => {
  selectedPayment.value = method.id;
  
  uni.showToast({
    title: `已选择 ${method.name}`,
    icon: 'none',
    duration: 1000
  });
};

const applyCoupon = () => {
  if (!couponCode.value.trim()) {
    uni.showToast({
      title: '请输入优惠码',
      icon: 'none'
    });
    return;
  }
  
  // 模拟优惠码验证
  const validCoupons = {
    'QUANTUM2024': 20,
    'NEWUSER': 10,
    'VIP888': 50
  };
  
  const discount = validCoupons[couponCode.value.toUpperCase()];
  
  if (discount) {
    appliedDiscount.value = discount;
    uni.showToast({
      title: `优惠码生效，减免¥${discount}`,
      icon: 'success'
    });
  } else {
    uni.showToast({
      title: '优惠码无效',
      icon: 'error'
    });
  }
};

const processPay = () => {
  if (!canPay.value) return;
  
  const selectedPkg = selectedPackageInfo.value;
  const selectedPaymentMethod = paymentMethods.find(m => m.id === selectedPayment.value);
  
  uni.showLoading({
    title: '处理支付中...'
  });
  
  // 模拟支付处理
  setTimeout(() => {
    uni.hideLoading();
    
    // 模拟支付成功
    uni.showModal({
      title: '支付成功',
      content: `恭喜您成功购买${selectedPkg.name}套餐！会员权益已生效。`,
      showCancel: false,
      confirmText: '确定',
      confirmColor: '#00ffff',
      success: () => {
        // 跳转回个人页面
        uni.navigateBack();
        
        // 显示成功提示
        setTimeout(() => {
          uni.showToast({
            title: '会员已激活',
            icon: 'success'
          });
        }, 500);
      }
    });
  }, 2000);
};
</script>

<style>
.cyberpunk-recharge-container {
  background: linear-gradient(135deg, #000 0%, #1a0033 50%, #000 100%);
  color: #fff;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  width: 100%;
  box-sizing: border-box;
}

.back-btn {
  color: #00ffff;
  font-size: 16px;
  padding: 5px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #ff00ff;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.quantum-indicator {
  font-size: 20px;
  animation: quantum-spin 3s linear infinite;
}

@keyframes quantum-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.content-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  margin: 20px 0;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  width: 100%;
  box-sizing: border-box;
}

.user-avatar {
  position: relative;
  width: 60px;
  height: 60px;
}

.user-avatar image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #00ffff;
}

.avatar-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(45deg, #ff00ff, #00ffff) border-box;
  animation: ring-rotate 3s linear infinite;
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.username {
  font-size: 18px;
  font-weight: bold;
  color: #00ffff;
}

.current-level, .current-points {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.content-scroll {
  height: calc(100vh - 200px);
  width: 100%;
  box-sizing: border-box;
}

.section-title {
  margin: 30px 0 20px 0;
  text-align: center;
}

.title-text {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
  margin-bottom: 5px;
}

.title-subtitle {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
  width: 100%;
}

.package-card {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 15px;
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.package-card.recommended {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.package-card.selected {
  border-color: #00ffff;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
  transform: scale(1.02);
}

.package-card:active {
  transform: scale(0.98);
}

.package-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #000;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

.package-header {
  text-align: center;
  margin-bottom: 15px;
}

.package-name {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 5px;
}

.package-duration {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.package-price {
  text-align: center;
  margin-bottom: 15px;
  position: relative;
}

.price-symbol {
  font-size: 14px;
  color: #ff00ff;
  vertical-align: top;
}

.price-amount {
  font-size: 24px;
  font-weight: bold;
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.price-original {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}

.package-benefits {
  margin-bottom: 15px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.benefit-icon {
  color: #00ff00;
  font-size: 12px;
}

.benefit-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
}

.package-bonus {
  text-align: center;
  padding: 8px;
  background: rgba(255, 0, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 0, 255, 0.3);
}

.bonus-text {
  font-size: 12px;
  color: #ff00ff;
  font-weight: bold;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.payment-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.payment-item.selected {
  border-color: #00ffff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.payment-icon {
  font-size: 24px;
}

.payment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.payment-name {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.payment-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.payment-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #00ffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-dot {
  width: 10px;
  height: 10px;
  background: #00ffff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.coupon-section {
  margin-bottom: 20px;
  width: 100%;
}

.coupon-input {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.coupon-field {
  flex: 1;
  padding: 12px 15px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}

.coupon-btn {
  padding: 12px 20px;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  border: none;
  border-radius: 8px;
  color: #000;
  font-weight: bold;
  font-size: 14px;
}

.coupon-discount {
  text-align: center;
  padding: 10px;
  background: rgba(0, 255, 0, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 0, 0.3);
}

.discount-text {
  color: #00ff00;
  font-weight: bold;
}

.order-summary {
  margin-bottom: 20px;
  width: 100%;
}

.summary-content {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 10px;
  padding: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.summary-value {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

.summary-value.discount {
  color: #00ff00;
}

.summary-item.total .summary-label,
.summary-item.total .summary-value {
  font-size: 16px;
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.summary-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 15px 0;
}

.payment-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  border-top: 1px solid rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer-content {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 600px;
}

.total-price {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.total-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.total-amount {
  font-size: 20px;
  font-weight: bold;
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.pay-btn {
  flex: 1;
  height: 50px;
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  border: none;
  border-radius: 25px;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.pay-btn:active {
  transform: scale(0.98);
}

.pay-btn.disabled {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

/* 响应式调整 */
@media screen and (max-width: 375px) {
  .packages-grid {
    grid-template-columns: 1fr;
  }
  
  .package-card {
    padding: 15px;
  }
  
  .price-amount {
    font-size: 20px;
  }
  
  .benefit-text {
    font-size: 11px;
  }
}
</style>